<template>
  <uv-navbar title="" :background="{ backgroundColor: '#fff' }" :border="false">
    <template #left>
      <view class="header-open">
        <uv-icon name="menu" size="24" color="#333" @click="openMessage()"/>
      </view>
    </template>

    <template #center>
 <!--     <uv-popover ref="modelPopover" :show-arrow="false" @change="onPopoverChange">
        <view class="head-box">
          <uv-radio-group v-model="isCheckNum">
            <view
                v-for="item in modelList"
                :key="item.mainModelId"
                class="model-item"
            >
              <view class="head-con" @click="handleSelect(item)">
                <view class="img-con">
                  <image :src="item.mainModelImg"/>
                </view>
                <view class="head-left">
                  <view class="head-title">{{ item.mainModelName }}</view>
                  <view class="head-desc">{{ item.mainModelDescription }}</view>
                </view>
                <uv-radio
                    :name="item.mainModelId"
                    active-color="#737373"
                ></uv-radio>
              </view>
            </view>
          </uv-radio-group>
        </view>
        <template #reference>
          <view class="title-content" @click="togglePopover">
            <text>AI智能分析</text>
            <uv-icon name="arrow-down" size="16" color="#b4b4b4"/>
          </view>
        </template>
      </uv-popover>
   -->
    </template>

    <template #right>
      <!-- <uv-tag text="1次" plain type="primary" size="mini" bg-color="#495057" color="#495057"/> -->
    </template>
  </uv-navbar>
</template>

<script>
export default {
  name: 'AIHeader',
  data() {
    return {
      showPopover: false,
      isMessage: false, // 是否显示左侧展开层
      isCheckNum: 4, // 选中的哪个ai模型
    }
  },
  props: {
    modelList: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    console.log('modelList', this.modelList)
  },
  methods: {
    // 跳转到反馈页面
    feedBack() {
      uni.navigateTo({ url: '/subPages/ai/feedback' })
    },

    // 打开左侧展开层
    openMessage() {
      this.isMessage = true
      this.$emit('update:data', this.isMessage)
    },

    handleSelect(item) {
      this.$refs.modelPopover.close()
      this.isCheckNum = item.mainModelId
      this.$emit('on-select', item)
    },

    togglePopover() {
      if (this.showPopover) {
        this.$refs.modelPopover.close()
      } else {
        this.$refs.modelPopover.open()
      }
    },

    onPopoverChange(e) {
      this.showPopover = e.show
    },
  },
}
</script>

<style lang="scss" scoped>
.feedback {
  margin-left: 40rpx;
}

.head-box {
  padding: 20rpx 0;
}

.model-item {
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.head-con {
  margin: 0 0 0 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .img-con {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #f9f9f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .head-left {
    margin: 0rpx 100rpx 0rpx 28rpx;
    flex: 1;
  }

  .head-title {
    color: #333;
    font-size: 32rpx;
  }

  .head-desc {
    color: #737373;
    font-size: 28rpx;
  }
}

.header-open {
  padding-left: 16rpx;
  display: flex;
  height: 100%;
  align-items: center;
}

.title-content {
  display: flex;
  align-items: center;

  text {
    color: #212529;
    font-size: 32rpx;
    font-weight: 500;
  }

  :deep(.uv-icon) {
    margin-left: 8rpx;
  }
}

:deep(.uv-navbar) {
  .uv-navbar__content {
    background-color: #fff !important;
  }

  .uv-navbar__content__title {
    color: #212529 !important;
  }
}
</style>
